/**
 * 
 */

(function($) {
	function Xbox(opt) {
		if($.xbox && $.xbox.opt.keyword == opt.keyword){
			return;
		}else if($.xbox){
			$.xbox.close();			
		}
		this.opt = $.extend({
			keyword: 'zoomino',
			width: 600,
			height: 600,
			buttons: {
				Close: function() {
					$( this ).dialog( "close" );
				}
			}
		},opt);
		this.name = this.opt.name;
		this.main();
		$.xbox = this;
	}
	
	$.extend(Xbox.prototype, {
		main : function() {
			this.show();
		},
		getData: function() {
			var _this = this;
			this.domAndEvent();
/*			new $.my.Search({type: 'news', keyword: this.opt.keyword, callback: function(data) {
				_this.data = data.responseData.results;
				_this.domAndEvent();
			}});*/	
		},
		domAndEvent : function(){
			if(this.opt.sub && this.opt.sub.length > 0){
				var _this = this;
				$(this.opt.sub).each(function(i, sub) {
					sub = $.extend({parent: _this}, sub);
					new subModule(sub);
				});
			}
			
			
			/*$.template(this.name, this.template);
			this.$container.append($.tmpl(this.name, this.opt.data || this.data));*/
			this.opt.callback && this.opt.callback(this.data);
		},
		show : function() {
			var _this = this;
			this.$container = $('<div>').dialog({
				title: 'Search: ' + _this.opt.keyword,
				autoOpen: true,
				show: 'slide',
				position: _this.opt.position,
				close: function() {
					$(this).remove();
					delete $.xbox;
				},
				width: _this.opt.width,
				height: _this.opt.height,
				buttons: _this.opt.buttons
			});
			this.getData();
		},
		close: function() {
			this.$container.dialog('close');
		},
		template: "<dl style='width:300px; float:left;'>" +
 		"<dt><a href='${$item.getUrl()}' target='_blank'>{{html title}}</a></dt>" +
 		"{{if image}}<dd style='float:left;margin:10px;'><a href='${$item.getUrl()}' target='_blank'><img src='${image.tbUrl}' width='${image.tbwidth}' height='${image.tbHeight}' border=0/></a></dd>{{/if}}" +
 		"<dd style='margin:0;'>{{html content}}</dd>" +
 		"</dl>"
	});
	
	
	function subModule(opt) {
		this.name = 'ok';
		this.opt = opt;
		this.parent = this.opt.parent;
		this.main();
		this.data = this.opt.data || [];
		this.currentPage = 1;
	}
	
	$.extend(subModule.prototype, {
		main: function() {
			this.init();
		},
		getData: function($container) {
			var _this = this;
			new $.my.Search({type: this.opt.searchType, keyword: this.opt.keyword, callback: function(data) {
				$.log('search result');
				$.log(data);
				_this.data[_this.currentPage] = data.responseData.results;
				_this.domAndEvent($container);
			}});
		},
		init: function(opt) {
			var _this = this;
			if(!this.parent.$tabs){
				this.$tabsUl = $('<ul>').appendTo(this.opt.parent.$container);
			}
			this.parent.$tabs = this.parent.$container.tabs({
				add : function(event, ui) {
					_this.$loading = $('<div>', {class: 'loading'}).appendTo(ui.panel);
					_this.getData($(ui.panel));
				}
			});
			this.addTab();
		},
		domAndEvent: function($container) {
			this.$content = $('<div>').append(this.getTemplate(this.opt.searchType, this.data[this.currentPage]));
			this.$container = $container.append(this.$content);
			if(this.opt.searchType == 'video'){
				this.$content.find('.videoTb').click(function() {
					$(this).hide();
					$(this).next('.videoPlayer').show();
				});
			}
			this.$pager = $('<div>', {class: 'pager', html: '<a class="page currentPage" pageNo = 1> 1 </a> <a class="page" pageNo = 2> 2 </a> <a class="page" pageNo = 3> 3 </a> <a class="page" pageNo = 4> 4 </a>'}).insertBefore(this.$content);
			this.buildPager();
			this.$loading.hide();
			this.opt.callback && this.opt.callback(this.data);
			
			
		},
		buildPager: function() {
			var _this = this;
			this.$currentPage = this.$pager.find('.page:first');
			this.$page = this.$pager.find('.page');
			this.$page.click(function() {
				_this.switchPage($(this));
			});
		},
		switchPage: function($pageItem) {
			this.$currentPage = $pageItem;
			var pageNo = parseInt($pageItem.attr('pageNo'));
			this.getPageData(pageNo);
		},
		getPageData: function(pageNo) {
			var _this = this;
			this.$loading.show();
			if(this.data[pageNo]){
				this.currentPage = pageNo;
				this.renderPage(pageNo);
			}else{
				new $.my.Search({type: this.opt.searchType, keyword: this.opt.keyword, start: pageNo * 8, callback: function(data) {
					$.log(data);
					if(data.responseData){
						_this.currentPage = pageNo;
						_this.data[_this.currentPage] = data.responseData.results;
						_this.renderPage(pageNo);
					}else{
						_this.getPageData(_this.currentPage);
					}
				}});
			}
			
			
		},
		renderPage: function(pageNo) {
			var _this = this;
			this.$content.html('');
			this.$content.html(this.getTemplate(this.opt.searchType, this.data[this.currentPage]));
			this.$loading.hide();
			this.$pager.find('.currentPage').removeClass('currentPage');
			this.$currentPage.addClass('currentPage');
		},
		 addTab: function() {
			this.id = arguments.callee.counter = arguments.callee.counter || 1;
			var tab_title = this.opt.searchType + ' : ' +this.opt.keyword;
			this.parent.$tabs.tabs( "add", "#tabs-" + this.id, tab_title );
			arguments.callee.counter ++;
		},
		template: {
			news: "<dl class='tmplNews'>" +
	 		"<dt><a href='${$item.getUrl()}' target='_blank'>{{html title}}</a></dt>" +
	 		"<dd>{{if image}}<a href='${$item.getUrl()}' target='_blank'><img src='${image.tbUrl}' width='${image.tbwidth}' height='${image.tbHeight}' border=0/></a>{{/if}} {{html content}}</dd>" +
	 		"</dl>",
	 		images: "<dl class='tmplImages'>" +
	 		"<dt><a href='${$item.getUrl()}' target='_blank'>{{html title}}</a></dt>" +
	 		"<dd><a href='${$item.getUrl()}' target='_blank'><img src='${url}' width='${tbwidth}' height='${tbHeight}' border=0/></a></dd>" +
	 		"</dl>",
	 		video: "<dl class='tmplVideo'>" +
	 		"<dt><a href='${$item.getUrl()}' target='_blank'>{{html title}}</a></dt>" +
	 		"<dd>{{html $item.getVideoTb()}}</dd>" +
	 		"</dl>"
	 		},
	 	getTemplate: function(type, data) {
	 		var template = this.template[type];
	 		var templateName = 'template-' + type;
	 		$.template(templateName, template);
	 		return $.tmpl(templateName, data, {
				getUrl: function(){
					return decodeURIComponent(this.data.url || this.data.originalContextUrl);
				},
				getFlash: function() {
					this.data.playUrl = this.data.playUrl.replace('&autoplay=1', '');
					return "<object codeBase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='100%' height='100%'>" +
							"<PARAM NAME='Movie' VALUE='" +	this.data.playUrl	+ "'>" +
							"<PARAM NAME='WMode' VALUE='transparent'>" +
							"<param name='quality' value='high'>" +
							"<param name='allowFullScreen' value='true'>" +
							"<param name='allowscriptaccess' value='always'>" +
							"<param name='flashvars' value=''>" +
							"<embed src='" +	this.data.playUrl	+ "' width='100%' height='100%' flashvars='' allowscriptaccess='always' allowfullscreen='true' quality='high' type='application/x-shockwave-flash'>" +
							"</object>";
				},
				getVideoTb: function() {
					//this.data.playUrl = this.data.playUrl.replace('&autoplay=1', '');
					var videoHtml =  "<div class='videoPlayer'><object codeBase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='100%' height='100%'>" +
							"<PARAM NAME='Movie' VALUE='" +	this.data.playUrl	+ "'>" +
							"<PARAM NAME='WMode' VALUE='transparent'>" +
							"<param name='quality' value='high'>" +
							"<param name='allowFullScreen' value='true'>" +
							"<param name='allowscriptaccess' value='always'>" +
							"<param name='flashvars' value=''>" +
							"<embed src='" +	this.data.playUrl	+ "' width='100%' height='100%' flashvars='' allowscriptaccess='always' allowfullscreen='true' quality='high' type='application/x-shockwave-flash'>" +
							"</object></div>";
					
					return "<img class='videoTb' src='" + this.data.tbUrl + "' width='" + this.data.tbWidth + "' height='" + this.data.tbHeight + "' playUrl='" + this.data.playUrl + "' border='0' />" + videoHtml;
				}
			});
		}
		

	});
	
	$.ui.subModule = subModule;
	$.ui.Xbox = Xbox;
})(jQuery);